<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书分类管理</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
    <h2 class="mt-4">图书分类管理</h2>
    <button type="button"
            class="btn btn-primary mb-3"
            data-toggle="modal"
            data-target="#addCategoryModal">
        新增图书分类
    </button>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="category : ${categories}">
            <td th:text="${category.id}"></td>
            <td th:text="${category.name}"></td>
            <td>
                <button type="button"
                        class="btn btn-info btn-sm"
                        data-toggle="modal"
                        data-target="#editCategoryModal"
                        th:attr="data-id=${category.id}, data-name=${category.name}">
                    编辑
                </button>
                <button type="button"
                        class="btn btn-danger btn-sm"
                        data-toggle="modal"
                        data-target="#deleteCategoryModal"
                        th:attr="data-id=${category.id}, data-name=${category.name}">
                    删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li th:classappend="${currentPage == 0 ? 'disabled' : ''}">
                <a th:href="@{/book-category/list(page=${currentPage - 1}, size=${pageSize})}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li th:each="i : ${#numbers.sequence(0, totalPages - 1)}"
                th:classappend="${i == currentPage ? 'active' : ''}">
                <a th:href="@{/book-category/list(page=${i}, size=${pageSize})}">
                    <span th:text="${i + 1}"></span>
                </a>
            </li>
            <li th:classappend="${currentPage == totalPages - 1 ? 'disabled' : ''}">
                <a th:href="@{/book-category/list(page=${currentPage + 1}, size=${pageSize})}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<!-- 新增图书分类模态框 -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addCategoryModalLabel">新增图书分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addCategoryForm">
                    <div class="form-group">
                        <label for="addCategoryName">名称</label>
                        <input type="text" class="form-control" id="addCategoryName" name="name" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addCategory()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑图书分类模态框 -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">编辑图书分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editCategoryForm">
                    <input type="hidden" id="editCategoryId" name="id">
                    <div class="form-group">
                        <label for="editCategoryName">名称</label>
                        <input type="text" class="form-control" id="editCategoryName" name="name" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="editCategory()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除图书分类模态框 -->
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteCategoryModalLabel">删除图书分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>确定要删除图书分类 <span id="deleteCategoryName"></span> 吗？</p>
                <input type="hidden" id="deleteCategoryId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="deleteCategory()">删除</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery-3.5.1.slim.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script>
    // 新增图书分类
    function addCategory() {
        const categoryName = document.getElementById('addCategoryName').value;
        axios.post('/bookCategory', { name: categoryName })
            .then(response => {
                location.reload();
            })
            .catch(error => {
                alert('新增失败，请重试');
            });
    }

    // 编辑图书分类
    $('#editCategoryModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const categoryId = button.data('id');
        const categoryName = button.data('name');
        const modal = $(this);
        modal.find('#editCategoryId').val(categoryId);
        modal.find('#editCategoryName').val(categoryName);
    });

    function editCategory() {
        const categoryId = document.getElementById('editCategoryId').value;
        const categoryName = document.getElementById('editCategoryName').value;
        axios.put('/bookCategory', { id: categoryId, name: categoryName })
            .then(response => {
                location.reload();
            })
            .catch(error => {
                alert('编辑失败，请重试');
            });
    }

    // 删除图书分类
    $('#deleteCategoryModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const categoryId = button.data('id');
        const categoryName = button.data('name');
        const modal = $(this);
        modal.find('#deleteCategoryId').val(categoryId);
        modal.find('#deleteCategoryName').text(categoryName);
    });

    function deleteCategory() {
        const categoryId = document.getElementById('deleteCategoryId').value;
        axios.delete(`/bookCategory/${categoryId}`)
            .then(response => {
                location.reload();
            })
            .catch(error => {
                alert('删除失败，请重试');
            });
    }
</script>
</body>
</html>
